<template>
  <div class="header">
    <div class="logo">
      <el-button type="text" @click="$emit('toggle-collapse')" style="width: 40px;">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </el-button>
      <h1 class="system-title">爱的智慧树管理系统</h1>
    </div>
    <div class="header-right">
      <el-tooltip :content="isDarkTheme ? '切换浅色主题' : '切换深色主题'" placement="bottom">
        <div class="theme-switch" @click="toggleTheme">
          <i :class="isDarkTheme ? 'el-icon-sunny' : 'el-icon-moon'"></i>
        </div>
      </el-tooltip>
      <el-dropdown trigger="click" @command="handleCommand">
        <div class="user-info">
          <el-avatar :size="32" :src="avatarUrl" class="user-avatar" shape="circle">
            {{ username ? username.slice(0, 1).toUpperCase() : 'U' }}
          </el-avatar>
          <span class="username">{{ username || '用户' }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'UiHeader',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(['username', 'avatarUrl', 'isDarkTheme'])
  },
  methods: {
    ...mapMutations(['toggleTheme']),
    ...mapActions(['getUserInfo']),
    handleCommand (command) {
      if (command === 'logout') {
        localStorage.removeItem('token')
        this.$router.push('/login')
      }
    }
  },
  created () {
    // 获取用户信息
    this.getUserInfo()
  }
}
</script>

<style scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
}

.system-title {
  margin: 0 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.header-right {
  display: flex;
  align-items: center;
}

.theme-switch {
  margin-right: 20px;
  cursor: pointer;
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
}

.theme-switch:hover {
  background-color: var(--hover-color);
  border-color: var(--primary-color);
}

.theme-switch i {
  font-size: 20px;
  color: var(--text-color);
  transition: all 0.3s;
}

.theme-switch:hover i {
  color: var(--primary-color);
  transform: scale(1.1);
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.user-info:hover {
  background-color: var(--hover-color);
}

.user-avatar {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
  overflow: hidden;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: var(--text-color);
}

.el-icon-arrow-down {
  font-size: 12px;
  color: var(--text-color-secondary);
  transition: transform 0.3s;
}

.user-info:hover .el-icon-arrow-down {
  transform: rotate(180deg);
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  padding: 5px 0;
  margin: 5px 0;
  border-radius: 4px;
  box-shadow: var(--box-shadow);
}

.el-dropdown-menu__item {
  padding: 8px 20px;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s;
}

.el-dropdown-menu__item:hover {
  background-color: var(--hover-color);
  color: var(--primary-color);
}

.el-dropdown-menu__item i {
  margin-right: 8px;
}
</style>
